<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>查看路径</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/newCourse.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <style>
        .app {
            float: left;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>

</head>

<body>
<!--		<p>这里是添加页面页面</p>-->
<!-- 一级容器，与其他框架（iframe , div）同级，装填以下div -->
<div id="app" class="container-fluid app" >
    <template>
        <el-table :data="routes" stripe style="width: 100%">
            <el-table-column prop="name" label="路径名字" width="180">
            </el-table-column>
            <el-table-column prop="description" label="路径简介" width="440">
            </el-table-column>
            <el-table-column label="证书" prop="certificate.name">

            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                <el-button
                        size="mini" type="txt" @click="showRoute(scope.row)">查看
                </el-button>
                <el-button size="mini" type="danger" @click="del(scope.row.routeid,scope.$index)">删除
                </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">

            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[5,10,15,20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalNums">
            </el-pagination>
        </div>
    </template>
    <el-dialog title="路径内容" :visible.sync="dialogFormVisible" width="60%" center>
               <template>

                    <el-table
                            :data="routeDetails"
                            style="width: 600px">
                        <el-table-column
                                prop="orderno"
                                label="序号">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="名字"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="styleName"
                                label="类型"
                                width="180">
                        </el-table-column>
                    </el-table>
                </template>


        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
        </div>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                routes: [],
                page: 1,
                totalNums: 1,
                pageSize: 5,
                storage: undefined,
                token: "",
                refreshToken: "",
                dialogFormVisible:false,
                name:"",
                des:"",
                routeDetails:""



            }
        },
        created() {
            this.getToken();
            this.getRoutes();
        },
        methods: {
            getToken: function () {
                this.storage = window.localStorage;
                this.token = this.storage.getItem("token");
                this.refreshToken = this.storage.getItem("refreshToken");
            },
            handleCurrentChange: function (page) {
                this.page = page;
                this.getRoutes();
            },
            handleSizeChange: function (pageSize) {
                this.pageSize = pageSize;

                this.getRoutes();
            },
            getRoutes: function () {
                let data = {
                    "page": this.page,
                    "pageSize": this.pageSize
                };
                axios.post("/learnmap/findRoutes", data, {
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8',
                        "token": this.token,
                        "refreshToken": this.refreshToken
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        this.routes = res.data.data.data;
                        this.totalNums = res.data.data.totalNum;
                    } else if (res.data.code == 330) {
                        this.$message({
                            message: '系统维护中',
                            type: 'error'
                        });
                    }
                })
            },
            del:function(routeid,index){
                this.$confirm('此操作会删除该路径, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let that =this;
                    let data={
                        "routeid":routeid
                    }
                    axios.post("/learnmap/delRoute",data,{
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8',
                            "token": this.token,
                            "refreshToken": this.refreshToken
                        }
                    }).then(res=>{
                        if(res.data.code ==200){
                            this.totalNums--;
                            this.routes.splice(index,1);
                            that.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }else if(res.data.code ==330){
                            that.$message({
                                type: 'warning',
                                message: '系统维护中!'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            showRoute:function(route){
                let data={
                    "routeid":route.routeid
                };
                axios.post("/learnmap/findRouteDetails",data,{
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8',
                        "token": this.token,
                        "refreshToken": this.refreshToken
                    }
                }).then(res=>{
                    if(res.data.code == 200){
                        this.dialogFormVisible=true;
                        this.name=route.name;
                        this.des=route.description
                        this.routeDetails=res.data.data;
                    }else if(res.data.code ==330){
                        this.$message({
                            message: '系统维护中',
                            type: 'error'
                        });
                    }
                })
            }

        }
    })
</script>
</body>

</html>